<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{#if diary}}编辑{{else}}创建{{/if}}参试日志</title>
    <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
    <link href="/apps/css/fontawesome-free-6.4.0-web/css/all.css" rel="stylesheet">
</head>
<body>
    <div class="container py-4">
        <div class="row mb-4">
            <div class="col">
                <h2>
                    <a href="/apps/trial" class="text-decoration-none">临床研究支持</a>
                    <i class="fas fa-chevron-right mx-2"></i>
                    <a href="/apps/trial/diary/list/{{trial.id}}" class="text-decoration-none">参试日志</a>
                    <i class="fas fa-chevron-right mx-2"></i>
                    {{#if diary}}编辑{{else}}创建{{/if}}日记
                </h2>
            </div>
        </div>

        <form id="diaryForm" method="POST" action="{{#if diary}}/apps/trial/diary/{{diary.id}}/edit{{else}}/apps/trial/diary/create/{{trial.id}}{{/if}}" onsubmit="return validateForm()">
            <!-- 基本信息部分 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">基本信息</h5>

                    <!-- 日期选择 -->
                    <div class="form-group mb-3">
                        <label class="form-label">日期</label>
                        <input type="date" class="form-control" name="diary_date" required
                            value="{{#if diary}}{{formatDate diary.diary_date "YYYY-MM-DD"}}{{else}}{{today}}{{/if}}">
                    </div>

                    <!-- 试验组用户必填部分 -->
                    <div class="form-group mb-3">
                        <label>早餐后服用益星</label>
                        <div class="btn-group" role="group">
                            <input type="radio" class="btn-check" name="morning_dose" id="morning_dose_yes" value="已服" {{#if diary}}{{#if (eq diary.morning_dose "已服")}}checked{{/if}}{{/if}} required>
                            <label class="btn btn-outline-success" for="morning_dose_yes">已服</label>
                            <input type="radio" class="btn-check" name="morning_dose" id="morning_dose_no" value="漏服" {{#if diary}}{{#if (eq diary.morning_dose "漏服")}}checked{{/if}}{{/if}}>
                            <label class="btn btn-outline-danger" for="morning_dose_no">漏服</label>
                        </div>
                        <div class="missed-reason mt-2" {{#if diary}}{{#if (eq diary.morning_dose "漏服")}}style="display: block;"{{else}}style="display: none;"{{/if}}{{else}}style="display: none;"{{/if}}>
                            <label>漏服原因</label>
                            <select class="form-select" name="morning_missed_reason">
                                <option value="外出" {{#if diary}}{{#if (eq diary.morning_missed_reason "外出")}}selected{{/if}}{{/if}}>外出</option>
                                <option value="拒服" {{#if diary}}{{#if (eq diary.morning_missed_reason "拒服")}}selected{{/if}}{{/if}}>拒服</option>
                                <option value="其它" {{#if diary}}{{#if (eq diary.morning_missed_reason "其它")}}selected{{/if}}{{/if}}>其它</option>
                            </select>
                            <input type="text" class="form-control mt-2" name="morning_missed_other" placeholder="请注明其它原因" value="{{diary.morning_missed_other}}" {{#if diary}}{{#if (eq diary.morning_missed_reason "其它")}}style="display: block;"{{else}}style="display: none;"{{/if}}{{else}}style="display: none;"{{/if}}>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label>晚餐后服用益星</label>
                        <div class="btn-group" role="group">
                            <input type="radio" class="btn-check" name="evening_dose" id="evening_dose_yes" value="已服" {{#if diary}}{{#if (eq diary.evening_dose "已服")}}checked{{/if}}{{/if}} required>
                            <label class="btn btn-outline-success" for="evening_dose_yes">已服</label>
                            <input type="radio" class="btn-check" name="evening_dose" id="evening_dose_no" value="漏服" {{#if diary}}{{#if (eq diary.evening_dose "漏服")}}checked{{/if}}{{/if}}>
                            <label class="btn btn-outline-danger" for="evening_dose_no">漏服</label>
                        </div>
                        <div class="missed-reason mt-2" {{#if diary}}{{#if (eq diary.evening_dose "漏服")}}style="display: block;"{{else}}style="display: none;"{{/if}}{{else}}style="display: none;"{{/if}}>
                            <label>漏服原因</label>
                            <select class="form-select" name="evening_missed_reason">
                                <option value="外出" {{#if diary}}{{#if (eq diary.evening_missed_reason "外出")}}selected{{/if}}{{/if}}>外出</option>
                                <option value="拒服" {{#if diary}}{{#if (eq diary.evening_missed_reason "拒服")}}selected{{/if}}{{/if}}>拒服</option>
                                <option value="其它" {{#if diary}}{{#if (eq diary.evening_missed_reason "其它")}}selected{{/if}}{{/if}}>其它</option>
                            </select>
                            <input type="text" class="form-control mt-2" name="evening_missed_other" placeholder="请注明其它原因" value="{{diary.evening_missed_other}}" {{#if diary}}{{#if (eq diary.evening_missed_reason "其它")}}style="display: block;"{{else}}style="display: none;"{{/if}}{{else}}style="display: none;"{{/if}}>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label>不良反应</label>
                        <select class="form-select" name="side_effects" required>
                            <option value="无" {{#if diary}}{{#if (eq diary.side_effects "无")}}selected{{/if}}{{/if}}>无</option>
                            <option value="皮疹" {{#if diary}}{{#if (eq diary.side_effects "皮疹")}}selected{{/if}}{{/if}}>皮疹</option>
                            <option value="腹泻" {{#if diary}}{{#if (eq diary.side_effects "腹泻")}}selected{{/if}}{{/if}}>腹泻</option>
                            <option value="便秘" {{#if diary}}{{#if (eq diary.side_effects "便秘")}}selected{{/if}}{{/if}}>便秘</option>
                            <option value="排气增多" {{#if diary}}{{#if (eq diary.side_effects "排气增多")}}selected{{/if}}{{/if}}>排气增多</option>
                            <option value="其它" {{#if diary}}{{#if (eq diary.side_effects "其它")}}selected{{/if}}{{/if}}>其它</option>
                        </select>
                        <input type="text" class="form-control mt-2" name="side_effects_other" placeholder="请注明其它不良反应" value="{{diary.side_effects_other}}" {{#if diary}}{{#if (eq diary.side_effects "其它")}}style="display: block;"{{else}}style="display: none;"{{/if}}{{else}}style="display: none;"{{/if}}>
                    </div>

                    <!-- 所有用户必填部分 -->
                    <div class="form-group mb-3">
                        <label>康复训练时长</label>
                        <select class="form-select" name="training_duration" required>
                            <option value="未训练" {{#if diary}}{{#if (eq diary.training_duration "未训练")}}selected{{/if}}{{/if}}>未训练</option>
                            <option value="0.5小时内" {{#if diary}}{{#if (eq diary.training_duration "0.5小时内")}}selected{{/if}}{{/if}}>0.5小时内</option>
                            <option value="1小时内" {{#if diary}}{{#if (eq diary.training_duration "1小时内")}}selected{{/if}}{{/if}}>1小时内</option>
                            <option value="1.5小时内" {{#if diary}}{{#if (eq diary.training_duration "1.5小时内")}}selected{{/if}}{{/if}}>1.5小时内</option>
                            <option value="2小时内" {{#if diary}}{{#if (eq diary.training_duration "2小时内")}}selected{{/if}}{{/if}}>2小时内</option>
                            <option value="3小时或以上" {{#if diary}}{{#if (eq diary.training_duration "3小时或以上")}}selected{{/if}}{{/if}}>3小时或以上</option>
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label>孩子的进展</label>
                        <textarea class="form-control" name="progress" rows="3" placeholder="孩子在训练中的配合度、兴趣和进步情况">{{#if diary}}{{diary.progress}}{{/if}}</textarea>
                    </div>
                </div>
            </div>

            <!-- 高级选项部分 -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">更多可选内容</h5>
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="toggleAdvancedOptions()">
                        <i class="fas fa-chevron-down" id="advancedToggleIcon"></i> 展开/收起
                    </button>
                </div>
                <div class="card-body" id="advancedContent" style="display: none;">
                    <div class="form-group mb-3">
                        <label>大便情况</label>
                        <div class="row">
                            <div class="col-md-4">
                                <label class="form-label">次数</label>
                                <input type="number" class="form-control" name="stool_times" min="0" value="{{#if diary}}{{diary.stool_times}}{{/if}}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">性状</label>
                                <select class="form-select" name="stool_type">
                                    <option value="">请选择</option>
                                    <option value="正常" {{#if diary}}{{#if (eq diary.stool_type "正常")}}selected{{/if}}{{/if}}>正常</option>
                                    <option value="干硬" {{#if diary}}{{#if (eq diary.stool_type "干硬")}}selected{{/if}}{{/if}}>干硬</option>
                                    <option value="稀软" {{#if diary}}{{#if (eq diary.stool_type "稀软")}}selected{{/if}}{{/if}}>稀软</option>
                                    <option value="水样" {{#if diary}}{{#if (eq diary.stool_type "水样")}}selected{{/if}}{{/if}}>水样</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">颜色</label>
                                <select class="form-select" name="stool_color">
                                    <option value="">请选择</option>
                                    <option value="棕" {{#if diary}}{{#if (eq diary.stool_color "棕")}}selected{{/if}}{{/if}}>棕</option>
                                    <option value="黄" {{#if diary}}{{#if (eq diary.stool_color "黄")}}selected{{/if}}{{/if}}>黄</option>
                                    <option value="黑" {{#if diary}}{{#if (eq diary.stool_color "黑")}}selected{{/if}}{{/if}}>黑</option>
                                    <option value="其它" {{#if diary}}{{#if (eq diary.stool_color "其它")}}selected{{/if}}{{/if}}>其它</option>
                                </select>
                            </div>
                        </div>
                        <input type="text" class="form-control mt-2" name="stool_abnormal" placeholder="异常情况说明" value="{{#if diary}}{{diary.stool_abnormal}}{{/if}}">
                    </div>

                    <div class="form-group mb-3">
                        <label>三餐记录</label>
                        <div class="row">
                            <div class="col-md-4">
                                <label class="form-label">早餐</label>
                                <textarea class="form-control" name="breakfast" rows="2">{{#if diary}}{{diary.breakfast}}{{/if}}</textarea>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">午餐</label>
                                <textarea class="form-control" name="lunch" rows="2">{{#if diary}}{{diary.lunch}}{{/if}}</textarea>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">晚餐</label>
                                <textarea class="form-control" name="dinner" rows="2">{{#if diary}}{{diary.dinner}}{{/if}}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label>食欲变化情况</label>
                        <select class="form-select" name="appetite">
                            <option value="">请选择</option>
                            <option value="无变化" {{#if diary}}{{#if (eq diary.appetite "无变化")}}selected{{/if}}{{/if}}>无变化</option>
                            <option value="增加" {{#if diary}}{{#if (eq diary.appetite "增加")}}selected{{/if}}{{/if}}>增加</option>
                            <option value="减少" {{#if diary}}{{#if (eq diary.appetite "减少")}}selected{{/if}}{{/if}}>减少</option>
                        </select>
                        <input type="text" class="form-control mt-2" name="appetite_note" placeholder="变化情况说明" value="{{#if diary}}{{diary.appetite_note}}{{/if}}">
                    </div>

                    <div class="form-group mb-3">
                        <label>营养补充</label>
                        <textarea class="form-control" name="supplements" rows="2" placeholder="非本试验的益生菌及营养素补充内容">{{#if diary}}{{diary.supplements}}{{/if}}</textarea>
                    </div>

                    <div class="form-group mb-3">
                        <label>睡眠情况</label>
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">时长（小时）</label>
                                <input type="number" class="form-control" name="sleep_duration" min="0" max="24" step="0.5" value="{{#if diary}}{{diary.sleep_duration}}{{/if}}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">质量</label>
                                <select class="form-select" name="sleep_quality">
                                    <option value="">请选择</option>
                                    <option value="好" {{#if diary}}{{#if (eq diary.sleep_quality "好")}}selected{{/if}}{{/if}}>好</option>
                                    <option value="中" {{#if diary}}{{#if (eq diary.sleep_quality "中")}}selected{{/if}}{{/if}}>中</option>
                                    <option value="差" {{#if diary}}{{#if (eq diary.sleep_quality "差")}}selected{{/if}}{{/if}}>差</option>
                                </select>
                            </div>
                        </div>
                        <input type="text" class="form-control mt-2" name="sleep_note" placeholder="异常情况说明" value="{{#if diary}}{{diary.sleep_note}}{{/if}}">
                    </div>

                    <div class="form-group mb-3">
                        <label>重大环境变化</label>
                        <textarea class="form-control" name="environment_changes" rows="2">{{#if diary}}{{diary.environment_changes}}{{/if}}</textarea>
                    </div>

                    <div class="form-group mb-3">
                        <label>今日心得小结</label>
                        <textarea class="form-control" name="summary" rows="3">{{#if diary}}{{diary.summary}}{{/if}}</textarea>
                    </div>
                </div>
            </div>

            <div class="text-center">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-1"></i>保存
                </button>
                <a href="/apps/trial/diary/list/{{trial.id}}" class="btn btn-secondary ms-2">
                    <i class="fas fa-times me-1"></i>取消
                </a>
            </div>
        </form>
    </div>

    <script src="/apps/js/bootstrap.bundle.min.js"></script>
    <script>
        function validateForm() {
            const form = document.getElementById('diaryForm');

            // 检查所有必填字段
            const requiredFields = form.querySelectorAll('[required]');
            for (let field of requiredFields) {
                if (!field.value) {
                    alert('请完成所有必填项');
                    field.focus();
                    return false;
                }
            }

            return true;
        }

        // 切换高级选项显示/隐藏
        function toggleAdvancedOptions() {
            const advancedContent = document.getElementById('advancedContent');
            const icon = document.getElementById('advancedToggleIcon');

            if (advancedContent.style.display === 'none') {
                advancedContent.style.display = 'block';
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
            } else {
                advancedContent.style.display = 'none';
                icon.classList.remove('fa-chevron-up');
                icon.classList.add('fa-chevron-down');
            }
        }

        // 处理漏服原因显示/隐藏
        document.addEventListener('DOMContentLoaded', function() {
            // 早餐服用
            const morningDoseInputs = document.querySelectorAll('input[name="morning_dose"]');
            const morningMissedReason = document.querySelector('select[name="morning_missed_reason"]');

            morningDoseInputs.forEach(input => {
                input.addEventListener('change', function() {
                    const missedReasonDiv = this.closest('.form-group').querySelector('.missed-reason');
                    if (this.value === '漏服') {
                        missedReasonDiv.style.display = 'block';
                    } else {
                        missedReasonDiv.style.display = 'none';
                    }
                });
            });

            if (morningMissedReason) {
                morningMissedReason.addEventListener('change', function() {
                    const otherReasonInput = this.nextElementSibling;
                    if (this.value === '其它') {
                        otherReasonInput.style.display = 'block';
                    } else {
                        otherReasonInput.style.display = 'none';
                    }
                });
            }

            // 晚餐服用
            const eveningDoseInputs = document.querySelectorAll('input[name="evening_dose"]');
            const eveningMissedReason = document.querySelector('select[name="evening_missed_reason"]');

            eveningDoseInputs.forEach(input => {
                input.addEventListener('change', function() {
                    const missedReasonDiv = this.closest('.form-group').querySelector('.missed-reason');
                    if (this.value === '漏服') {
                        missedReasonDiv.style.display = 'block';
                    } else {
                        missedReasonDiv.style.display = 'none';
                    }
                });
            });

            if (eveningMissedReason) {
                eveningMissedReason.addEventListener('change', function() {
                    const otherReasonInput = this.nextElementSibling;
                    if (this.value === '其它') {
                        otherReasonInput.style.display = 'block';
                    } else {
                        otherReasonInput.style.display = 'none';
                    }
                });
            }

            // 不良反应
            const sideEffectsSelect = document.querySelector('select[name="side_effects"]');
            if (sideEffectsSelect) {
                sideEffectsSelect.addEventListener('change', function() {
                    const otherInput = this.nextElementSibling;
                    if (this.value === '其它') {
                        otherInput.style.display = 'block';
                    } else {
                        otherInput.style.display = 'none';
                    }
                });
            }
        });
    </script>
</body>
</html> 
